import { computed, defineComponent, ref } from "vue";
import "./mainPage.css";
import EditorBlockComponent from '../components/EditorBlockComponent/editorBlock';
import EditorPreviewComponent from '../components/EditorPreviewComponent/editorPreview';
import AttriOperationBlockComponent from '../components/AttriOperationBlockComponent/attriOperBlock';
import { handleBlockfoucs, handleBlockMove } from "../uitls/handleBlock"
import { handleButton } from "../uitls/handleCommand";
export default defineComponent({
  props: {
    modelValue: { type: Object }
  },
  emits: ['update:modelValue'],
  setup(props, ctx) {
    const data = computed({
      get() {
        return props.modelValue
      },
      set(newValue) {     
        ctx.emit('update:modelValue', JSON.parse(JSON.stringify(newValue))); // 派发事件
      }
    })
    const containerRef = ref(null)
    const containerStyle = computed(() => ({
      width: data.value.container.width + 'px',
      height: data.value.container.height + 'px',
      position: 'relative',
      backgroundColor: '#eee',
    }))

    const handleModelValue = (params) => {      
      const { insetBlock, insert, update, updateBlock } = params
      let blocksList = data.value.blocks
      if (insert) {
        data.value.blocks.push(insetBlock)
      }
      if (update) {
        blocksList = blocksList.map(item => {
          if (item.templateId === updateBlock.templateId) {
            return updateBlock;
          }
          return item;
        });
        
        data.value.blocks = blocksList
      }
    }

    // 1.模块的 选中
    const { blockMouseDown, foucsData, containerMousedown, lastSelectBlock } = handleBlockfoucs(data, (e) => {
      // 选中之后 给 对应选中的模块 添加事件  方便后面进行拖动
      mousedown(e)
    })
    // 2.模块的 拖拽移动
    const { mousedown, markLine } = handleBlockMove(foucsData, lastSelectBlock, data)
    // 3.按钮的操作 撤销 删除
    const { button, updateBlock, updateContainer } = handleButton(data, foucsData)


    return () =>
      <div class="editor-box df dfm brd6">
        <div class="editor-preview df1 h100 bg1 brd6"><EditorPreviewComponent containerRef={containerRef} modelValue={data} handleModelValue={handleModelValue}></EditorPreviewComponent></div>
        <div class="df dfm dfdc df2 h100 mlr20 brd6">
          <div class="editor-tool bg1 w100 brd6 df dfm dfsb">
            {
              button.map(item => (
                <button class="mr16" onClick={item.handler}>{item.label}</button>
              ))
            }
          </div>
          {/* 中间内容 */}
          <div class="editor-container brd6 bg2 w100 h100 mt10">
            {/* 真实模块 渲染 */}
            <div class="editor-container-render">
              <div
                style={containerStyle.value}
                ref={containerRef}
                onmousedown={containerMousedown}
                id="low_page_dom"
              >
                {
                  (data.value.blocks.map((block, index) => (
                    <EditorBlockComponent class={block.foucs ? 'editorBlock_foucs ' : ''} block={block} handleModelValue={handleModelValue} onmousedown={e => blockMouseDown(e, block, index)}></EditorBlockComponent>
                  )))
                }
                {markLine.x !== null && <div class="mark-line-x" style={{ left: markLine.x + 'px' }}></div>}
                {markLine.y !== null && <div class="mark-line-y" style={{ top: markLine.y + 'px' }}></div>}
              </div>
            </div>
          </div>
        </div>
        <div class="editor-settings df1 h100 bg1 brd6">
          <AttriOperationBlockComponent block={lastSelectBlock.value} data={data.value} updateBlock={updateBlock} updateContainer={updateContainer}></AttriOperationBlockComponent>
        </div>
      </div>
  }
})